<template>
  <div style="background: #fff">
    <Backview title="价格详情" lable="Price Detail" />
    <div class="evaluate_wrap">
      <p class="address_wrap">您的位置：<b>首页 > </b><b> 价格详情</b></p>

      <div class="disable_form">
        <div>
          <el-form
            ref="form"
            :label-position="form.labelPosition"
            :model="form"
            label-width="80px"
          >
            <el-form-item label="价格查询">
              <el-select v-model="form.region" placeholder="请选择蜂蜜种类">
                <el-option label="百花蜜" value="a"></el-option>
                <el-option label="洋槐花蜜" value="b"></el-option>
                <el-option label="油菜花蜜" value="c"></el-option>
              </el-select>
            </el-form-item>
            <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number>
            <el-form-item label="按斤查询">
              <el-switch v-model="form.delivery"></el-switch>
            </el-form-item>

            <el-form-item label="购买方式">
              <el-radio-group v-model="form.resource">
                <el-radio label="线上购买"></el-radio>
                <el-radio label="线下交易"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即查询</el-button>
              <el-button @click="open">立即购买</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="price_wrap">
          <img :src="back_pic" alt="" />
          <div>
            <p>单价：￥{{ d_price }}/斤</p>
            <p>总价：￥{{ price }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="message_wrap" v-if="shows">
      <img :src="erweima" alt="">
      <p>扫一扫添加微信</p>
      <span @click="close()">确定</span>
    </div>
  </div>
</template>

<script>
import Backview from "../components/detailBack.vue";
export default {
  name: "HoneyEvaluate",

  data() {
    return {
      shows:false,
      erweima: require("../assets/erweima.jpg"),
      back_pic: require("../assets/back_pic.png"),
      num: 1,
      price: 150,
      d_price: 150,
      form: {
        name: "",
        labelPosition: "top",
        region: "",
        date1: "",
        date2: "",
        delivery: true,
        type: [],
        resource: "线上购买",
        desc: "",
      },
    };
  },

  mounted() {
    this.$nextTick(() => {
      window.scrollTo(0, 0);
    });
    this.$router.afterEach((to, from, next) => {});
  },

  methods: {
    onSubmit() {
      if(this.resource == "线下交易"){
        this.$message({
          message: "仅限",
          type: "warning",
        });
      }
      if (this.form.region.trim() == "") {
        this.$message({
          message: "请选择蜂蜜种类",
          type: "warning",
        });
      } else {
        if ((this.form.region == "a")) {
          this.price = 150 * Number(this.num);
          this.d_price = 150;
          console.log(1);
        }else if ((this.form.region == "b")) {
          this.price = 140 * Number(this.num);
          this.d_price = 140;
           console.log(2);
        }
        else if ((this.form.region == "c")) {
          this.price = 120 * Number(this.num);
          this.d_price = 120;
           console.log(3);
        }
      }
    },
    handleChange(value) {
      this.num = value;
    },
    open() {
        this.shows = true
      },
      close(){
        this.shows = false
      }
  },

  components: {
    Backview,
  },
};
</script>

<style lang="scss" scoped>
.evaluate_wrap {
  width: 1170px;
  height: 700px;
  margin: 0 auto;
  .address_wrap {
    margin: 50px 0;
    font-size: 20px;
    > b {
      color: rgb(63, 139, 240);
      cursor: pointer;
    }
  }
  > p:nth-child(2),
  p:nth-child(3) {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 36px;
    color: #8a8a8a;
  }
  > p:nth-child(3) {
    animation-delay: 0.3s;
  }
}
.disable_form {
  border: 1px solid rgb(218, 215, 215);
  border-radius: 10px;
  padding: 70px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.price_wrap {
  position: relative;
  > img {
    width: 500px;
    height: auto;
  }
  > div {
    position: absolute;
    top: 50%;
    left: 22%;
    text-align: center;
    > p:nth-child(1) {
      color: rgb(243, 93, 6);
      font-size: 30px;
      font-weight: bold;
    }
     > p:nth-child(2) {
       margin: 50px 0 0 0;
      color: rgb(243, 180, 6);
      font-size: 50px;
      font-weight: bold;
    }
  }
}
.message_wrap{
  width:300px;
  height:380px;
  position:fixed;
  top:50%;
  left:50%;
  border:1px solid #efefef;
  background:#ffffff;
  border-radius:5px;
  margin:-150px 0 0 -150px;
  text-align: center;
  >img{
    width: 100%;
    height: auto;
  }
  >span{
    cursor: pointer;
    line-height: 40px;
    display: block;
    width: 90px;
    height:40px;
    border-radius:5px;
    background:#409eff;
    color:#fff;
    font-size: 20px;
    font-weight: bold;
    margin:0px auto;
  }
}
</style>    